<template>
  <div class="app-container">
    <div class="search-container">
      <el-form :model="searchParam" :inline="true" label-width="67px">
        <el-form-item label="项目">
          <el-select
            v-model="searchParam.projectId"
            placeholder="请选择项目"
            clearable
            filterable
            @change="projectChange"
          >
            <el-option
              v-for="item in projectList"
              :key="item.id"
              :label="item.projectCode"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="工序">
          <el-select
            v-model="searchParam.processId"
            placeholder="请选择工序"
            clearable
            :disabled="!searchParam.projectId"
            filterable
            @change="processChange"
          >
            <el-option
              v-for="item in processList"
              :key="item.id"
              :label="item.processCode"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="设备">
          <el-select
            v-model="searchParam.equipId"
            placeholder="请选择设备"
            clearable
            filterable
            :disabled="!searchParam.processId"
            @change="equipChange"
          >
            <el-option
              v-for="item in equipList"
              :key="item.id"
              :label="item.equipCode"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="产品型号">
          <el-select
            v-model="searchParam.productId"
            placeholder="请选择产品型号"
            clearable
            filterable
            @change="productChange"
          >
            <el-option
              v-for="item in productList"
              :key="item.id"
              :label="item.productCode"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="检具类型">
          <el-select
            v-model="searchParam.gageEquipToolKind"
            placeholder="请选择量检具类型"
            clearable
            @change="toolKindChange"
          >
            <el-option
              v-for="item in useDictionary('InspectionToolKind')"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="检具设备">
          <el-select
            v-model="searchParam.gageEquipCode"
            placeholder="请选择检具设备"
            clearable
            filterable
            :disabled="!searchParam.gageEquipToolKind"
          >
            <el-option
              v-for="item in gageEquipList"
              :key="item.toolCode"
              :label="item.toolCode"
              :value="item.toolCode"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="特性项">
          <el-select
            v-model="searchParam.specificId"
            placeholder="请选择特性项"
            clearable
            filterable
            :disabled="!canSelectSpecific"
            :loading="specificLoading"
            loading-text="加载中..."
            @change="specificChange"
          >
            <el-option
              v-for="item in specificList"
              :key="item.paramId"
              :label="item.paramName"
              :value="item.paramId"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search" :loading="searchLoading">
            <i-ep-search v-if="!searchLoading" />
            查询
          </el-button>
          <el-button @click="reset">
            <i-ep-refresh />
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-row :gutter="10">
      <!-- 单值图 -->
      <el-col :lg="8" :md="8" :sm="24" class="mb-[10px]"
        ><el-card shadow="never" class="table-container">
          <div class="flex justify-between items-center title">
            <strong>单值图</strong>
            <div class="text-[12px]">
              <div class="flex items-center">
                <el-checkbox
                  v-model="singleChecked"
                  label="节点显示特性值"
                  class="mr-5! h-[26px]!"
                />
                <span class="c-[#838A9D] text-[13px] lh-[26px]!">采样数量</span>
                <el-input
                  v-model="singleCount"
                  placeholder="请输入"
                  class="single_count_input"
                  @keyup.enter="getSingleData(1)"
                >
                  <template #append>
                    <el-button
                      :icon="Search"
                      @click="getSingleData(1)"
                    /> </template
                ></el-input>
              </div>
            </div>
          </div>
          <!-- 加载中 -->
          <div
            v-if="singleLoading"
            v-loading="true"
            class="w-full h-[300px]"
          ></div>
          <!-- 数据为空 -->
          <div v-if="!singleLoading && !singleData?.paramId">
            <el-empty description="暂无数据" />
          </div>
          <div v-if="singleData?.paramId">
            <pcm-monitor-line-chart
              key="1"
              id="1"
              :showName="singleChecked"
              :seriesData="singleData"
            />
            <div class="charts_des flex justify-center text-[14px] lh-[20px]">
              <div class="flex items-center">
                <div class="mr-4 flex items-center">
                  <span class="squary red_back"></span>公差限：{{
                    showLineValue(
                      singleData?.lowerLimitValue,
                      singleData?.upperLimitValue
                    )
                  }}
                </div>
                <div class="mr-4 flex items-center">
                  <span class="squary yellow_back"></span>控制线：{{
                    showLineValue(
                      singleData?.controlDown,
                      singleData?.controlUp
                    )
                  }}
                </div>
                <div class="flex items-center">
                  <span class="squary green_back"></span>标准值：{{
                    singleData?.parameterStandards || ""
                  }}
                </div>
              </div>
            </div>
          </div>
        </el-card></el-col
      >
      <!--  阶段综合能力 阶段综合过程能力 -->
      <el-col :lg="8" :md="8" :sm="24" class="mb-[10px]"
        ><el-card shadow="never" class="table-container">
          <div class="flex justify-between items-center title">
            <strong>阶段综合过程能力</strong>
            <div class="text-[12px]">
              <div class="flex items-center">
                <el-checkbox
                  v-model="stateChecked"
                  label="节点显示特性值"
                  class="mr-5! h-[26px]!"
                />
              </div>
            </div>
          </div>
          <!-- 加载中 -->
          <div
            v-if="stateLoading"
            v-loading="true"
            class="w-full h-[300px]"
          ></div>
          <!-- 数据为空 -->
          <div v-if="!stateLoading && !stateData?.paramId">
            <el-empty description="暂无数据" />
          </div>
          <div v-if="stateData?.paramId">
            <pcmStateMonitorLineChart
              key="2"
              id="2"
              :showName="stateChecked"
              :seacher="searchParam"
              :seriesData="stateData"
            />
            <!-- <div class="charts_des flex justify-center text-[14px] lh-[20px]">
              <div class="flex items-center">
                <div class="mr-4 flex items-center">
                  <span class="squary red_back"></span>公差限：{{
                    showLineValue(
                      stateData?.lowerLimitValue,
                      stateData?.upperLimitValue
                    )
                  }}
                </div>
                <div class="mr-4 flex items-center">
                  <span class="squary yellow_back"></span>控制线：{{
                    showLineValue(stateData?.controlDown, stateData?.controlUp)
                  }}
                </div>
                <div class="flex items-center">
                  <span class="squary green_back"></span>标准值：{{
                    stateData?.parameterStandards || ""
                  }}
                </div>
              </div>
            </div> -->
          </div>
        </el-card></el-col
      >
      <!-- 工单信息 -->
      <el-col :lg="8" :md="8" :sm="24" class="mb-[10px]"
        ><el-card shadow="never" class="table-container">
          <div class="flex justify-between items-center title">
            <strong>工单信息</strong>
          </div>
          <!-- 加载中 -->
          <div
            v-if="workOrderLoading"
            v-loading="true"
            class="w-full h-[300px]"
          ></div>
          <!-- 数据为空 -->
          <div v-if="!workOrderLoading && !workOrderData?.paramId">
            <el-empty description="暂无数据" />
          </div>
          <pcm-monitor-sampling
            v-if="workOrderData?.paramId"
            key="1"
            id="1"
            :params="workOrderData"
          /> </el-card
      ></el-col>
      <!--  均值图 -->
      <el-col :lg="8" :md="8" :sm="24" class="mb-[10px]"
        ><el-card shadow="never" class="table-container">
          <div class="flex justify-between items-center title">
            <strong>均值图</strong>
            <div class="text-[12px]">
              <div class="flex items-center">
                <el-checkbox
                  v-model="averageChecked"
                  label="节点显示特性值"
                  class="mr-3! h-[26px]!"
                />
                <span class="c-[#838A9D] text-[13px] lh-[26px]!"
                  >均值分组测量数</span
                >
                <el-input
                  v-model="averageGroupCount"
                  placeholder="请输入"
                  class="single_count_input w-[60px]! mr-3! ml-[5px]!"
                  @keyup.enter="getAverageData(1)"
                >
                  <!-- <template #append>
                    <el-button
                      :icon="Search"
                      @click="getAverageData(1)"
                    /> </template
                > -->
                </el-input>
                <span class="c-[#838A9D] text-[13px] lh-[26px]!">采样数</span>
                <el-input
                  v-model="averageCount"
                  placeholder="请输入"
                  class="single_count_input w-[60px]! ml-[5px]!"
                  @keyup.enter="getAverageData(1)"
                >
                  <!-- <template #append>
                    <el-button
                      :icon="Search"
                      @click="getAverageData(1)"
                      
                    /> </template
                > -->
                </el-input>
                <el-button
                  :icon="Search"
                  plain
                  type="info"
                  class="search_btn1"
                  @click="getAverageData(1)"
                />
              </div>
            </div>
          </div>
          <!-- 加载中 -->
          <div
            v-if="averageLoading"
            v-loading="true"
            class="w-full h-[300px]"
          ></div>
          <!-- 数据为空 -->
          <div v-if="!averageLoading && !averageData?.paramId">
            <el-empty description="暂无数据" />
          </div>
          <div v-if="averageData?.paramId">
            <pcm-monitor-line-chart
              key="3"
              id="3"
              :showName="averageChecked"
              :seriesData="averageData"
            />
            <div class="charts_des flex justify-center text-[14px] lh-[20px]">
              <div class="flex items-center">
                <div class="mr-4 flex items-center">
                  <span class="squary red_back"></span>公差限：{{
                    showLineValue(
                      averageData?.lowerLimitValue,
                      averageData?.upperLimitValue
                    )
                  }}
                </div>
                <div class="mr-4 flex items-center">
                  <span class="squary yellow_back"></span>控制线：{{
                    showLineValue(
                      averageData?.controlDown,
                      averageData?.controlUp
                    )
                  }}
                </div>
                <div class="flex items-center">
                  <span class="squary green_back"></span>标准值：{{
                    averageData?.parameterStandards || ""
                  }}
                </div>
              </div>
            </div>
          </div>
        </el-card></el-col
      >
      <!-- 特殊送检1 特殊送检状态过程能力 -->
      <el-col :lg="8" :md="8" :sm="24" class="mb-[10px]"
        ><el-card shadow="never" class="table-container">
          <div class="flex justify-between items-center title">
            <strong>特殊送检状态过程能力</strong>
            <div class="text-[12px]">
              <div class="flex items-center">
                <span class="c-[#838A9D] text-[13px] lh-[26px]! mr-[5px]"
                  >特殊送检</span
                >
                <el-select
                  v-model="specialSearchData"
                  placeholder="请选择特性项"
                  clearable
                  filterable
                  :loading="specificLoading"
                  loading-text="加载中..."
                  @change="specialSearchDataChange"
                  style="width: 150px"
                >
                  <el-option
                    v-for="item in useDictionary('InspectionToolCode')"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                <el-checkbox
                  v-model="specialChecked"
                  label="节点显示特性值"
                  class="mr-5! ml-5! h-[26px]!"
                />
              </div>
            </div>
          </div>
          <!-- <div class="flex justify-center items-center title">
            <div class="text-[12px]">
              <div class="flex items-center">
                <span class="c-[#838A9D] text-[13px] lh-[26px]! mr-[5px]"
                  >特殊送检</span
                >
                <el-select
                  v-model="specialSearchData"
                  placeholder="请选择特性项"
                  clearable
                  filterable
                  :loading="specificLoading"
                  loading-text="加载中..."
                  @change="specialSearchDataChange"
                  style="width: 150px"
                >
                  <el-option
                    v-for="item in specificList"
                    :key="item.paramId"
                    :label="item.paramName"
                    :value="item.paramId"
                  />
                </el-select>
                <span
                  class="c-[#838A9D] text-[13px] lh-[26px]! mr-[5px] ml-[5px]"
                  >特性</span
                >
                <el-select
                  v-model="specialSearchShaft"
                  placeholder="请选择特性项"
                  clearable
                  filterable
                  :disabled="!specialSearchData"
                  :loading="specificLoading"
                  loading-text="加载中..."
                  @change="specificChange"
                  style="width: 150px"
                >
                  <el-option
                    v-for="item in specificList"
                    :key="item.paramId"
                    :label="item.paramName"
                    :value="item.paramId"
                  />
                </el-select>
              </div>
            </div>
          </div> -->
          <!-- 加载中 -->
          <div
            v-if="specialLoading"
            v-loading="true"
            class="w-full h-[300px]"
          ></div>
          <!-- 数据为空 -->
          <div v-if="!specialLoading && !specialData?.paramId">
            <el-empty description="暂无数据" />
          </div>
          <div v-if="specialData?.paramId">
            <pcmSpecialMonitorLineChart
              key="4"
              id="4"
              :showName="specialChecked"
              :seacher="searchParam"
              :seriesData="specialData"
            />
            <!-- <div class="charts_des flex justify-center text-[14px] lh-[20px]">
              <div class="flex items-center">
                <div class="mr-4 flex items-center">
                  <span class="squary red_back"></span>公差限：{{
                    showLineValue(
                      singleData?.lowerLimitValue,
                      singleData?.upperLimitValue
                    )
                  }}
                </div>
                <div class="mr-4 flex items-center">
                  <span class="squary yellow_back"></span>控制线：{{
                    showLineValue(
                      singleData?.controlDown,
                      singleData?.controlUp
                    )
                  }}
                </div>
                <div class="flex items-center">
                  <span class="squary green_back"></span>标准值：{{
                    singleData?.parameterStandards || ""
                  }}
                </div>
              </div>
            </div> -->
          </div>
        </el-card></el-col
      >
      <!-- 附件下载 -->
      <el-col :lg="8" :md="8" :sm="8" class="mb-[10px]"
        ><el-card shadow="never" class="table-container">
          <div class="flex justify-between items-center title">
            <strong>附件下载</strong>
          </div>
          <!-- 加载中 -->
          <div
            v-if="attachLoading"
            v-loading="true"
            class="w-full h-[300px]"
          ></div>
          <pcm-monitor-attachment v-else :params="attachData" /> </el-card
      ></el-col>
      <!-- 长期综合能力 长期综合过程能力 -->
      <el-col :lg="8" :md="8" :sm="24" class="mb-[10px]"
        ><el-card shadow="never" class="table-container">
          <div class="flex justify-between items-center title">
            <strong>长期综合过程能力</strong>
            <div class="text-[12px]">
              <div class="flex items-center">
                <el-checkbox
                  v-model="longChecked"
                  label="节点显示特性值"
                  class="mr-5! h-[26px]!"
                />
                <!-- <span class="c-[#838A9D] text-[13px] lh-[26px]!">采样数量</span>
                <el-input
                  v-model="longCount"
                  placeholder="请输入"
                  class="long_count_input"
                  @keyup.enter="getlongData(1)"
                >
                  <template #append>
                    <el-button
                      :icon="Search"
                      @click="getlongData(1)"
                    /> </template
                ></el-input> -->
              </div>
            </div>
          </div>
          <!-- 加载中 -->
          <div
            v-if="longLoading"
            v-loading="true"
            class="w-full h-[300px]"
          ></div>
          <!-- 数据为空 -->
          <div v-if="!longLoading && !longData?.paramId">
            <el-empty description="暂无数据" />
          </div>
          <div v-if="longData?.paramId">
            <pcmLongMonitorLineChart
              key="5"
              id="5"
              :showName="longChecked"
              :seacher="searchParam"
              :seriesData="longData"
            />
            <!-- <div class="charts_des flex justify-center text-[14px] lh-[20px]">
              <div class="flex items-center">
                <div class="mr-4 flex items-center">
                  <span class="squary red_back"></span>公差限：{{
                    showLineValue(
                      longData?.lowerLimitValue,
                      longData?.upperLimitValue
                    )
                  }}
                </div>
                <div class="mr-4 flex items-center">
                  <span class="squary yellow_back"></span>控制线：{{
                    showLineValue(
                      longData?.controlDown,
                      longData?.controlUp
                    )
                  }}
                </div>
                <div class="flex items-center">
                  <span class="squary green_back"></span>标准值：{{
                    longData?.parameterStandards || ""
                  }}
                </div>
              </div>
            </div> -->
          </div>
        </el-card></el-col
      >
      <!-- 特殊送检2 特殊送检状态过程能力 -->
      <el-col :lg="8" :md="8" :sm="24" class="mb-[10px]"
        ><el-card shadow="never" class="table-container">
          <div class="flex justify-between items-center title">
            <strong>特殊送检状态过程能力</strong>
            <div class="text-[12px]">
              <div class="flex items-center">
                <span class="c-[#838A9D] text-[13px] lh-[26px]! mr-[5px]"
                  >特殊送检</span
                >
                <el-select
                  v-model="specialTwoSearchData"
                  placeholder="请选择特性项"
                  clearable
                  filterable
                  :loading="specificLoading"
                  loading-text="加载中..."
                  @change="specialTwoSearchDataChange"
                  style="width: 150px"
                >
                  <el-option
                    v-for="item in useDictionary('InspectionToolCode')"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                <el-checkbox
                  v-model="specialTwoChecked"
                  label="节点显示特性值"
                  class="mr-5! ml-5! h-[26px]!"
                />
              </div>
            </div>
          </div>
          <!-- <div class="flex justify-center items-center title">
            <div class="text-[12px]">
              <div class="flex items-center">
                <span class="c-[#838A9D] text-[13px] lh-[26px]! mr-[5px]"
                  >特殊送检</span
                >
                <el-select
                  v-model="specialTwoSearchData"
                  placeholder="请选择特性项"
                  clearable
                  filterable
                  :loading="specificLoading"
                  loading-text="加载中..."
                  @change="specificChange"
                  style="width: 150px"
                >
                  <el-option
                    v-for="item in specificList"
                    :key="item.paramId"
                    :label="item.paramName"
                    :value="item.paramId"
                  />
                </el-select>
                <span
                  class="c-[#838A9D] text-[13px] lh-[26px]! mr-[5px] ml-[5px]"
                  >特性</span
                >
                <el-select
                  v-model="specialTwoSearchShaft"
                  placeholder="请选择特性项"
                  clearable
                  filterable
                  :disabled="!specialTwoSearchData"
                  :loading="specificLoading"
                  loading-text="加载中..."
                  @change="specificChange"
                  style="width: 150px"
                >
                  <el-option
                    v-for="item in specificList"
                    :key="item.paramId"
                    :label="item.paramName"
                    :value="item.paramId"
                  />
                </el-select>
              </div>
            </div>
          </div> -->
          <!-- 加载中 -->
          <div
            v-if="specialTwoLoading"
            v-loading="true"
            class="w-full h-[300px]"
          ></div>
          <!-- 数据为空 -->
          <div v-if="!specialTwoLoading && !specialTwoData?.paramId">
            <el-empty description="暂无数据" />
          </div>
          <div v-if="specialTwoData?.paramId">
            <pcmSpecialMonitorLineChart
              key="6"
              id="6"
              :showName="specialTwoChecked"
              :seacher="searchParam"
              :seriesData="specialTwoData"
            />
          </div> </el-card
      ></el-col>
      <!-- 特殊送检3 特殊送检状态过程能力 -->
      <el-col :lg="8" :md="8" :sm="24" class="mb-[10px]"
        ><el-card shadow="never" class="table-container">
          <div class="flex justify-between items-center title">
            <strong>特殊送检状态过程能力</strong>
            <div class="text-[12px]">
              <div class="flex items-center">
                <span class="c-[#838A9D] text-[13px] lh-[26px]! mr-[5px]"
                  >特殊送检</span
                >
                <el-select
                  v-model="specialThreeSearchData"
                  placeholder="请选择特性项"
                  clearable
                  filterable
                  :loading="specificLoading"
                  loading-text="加载中..."
                  style="width: 150px"
                  @change="specialThreeSearchDataChange"
                >
                  <el-option
                    v-for="item in useDictionary('InspectionToolCode')"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                <el-checkbox
                  v-model="specialThreeChecked"
                  label="节点显示特性值"
                  class="mr-5! ml-5! h-[26px]!"
                />
              </div>
            </div>
          </div>
          <!-- <div class="flex justify-center items-center title">
            <div class="text-[12px]">
              <div class="flex items-center">
                <span class="c-[#838A9D] text-[13px] lh-[26px]! mr-[5px]"
                  >特殊送检</span
                >
                <el-select
                  v-model="specialThreeSearchData"
                  placeholder="请选择特性项"
                  clearable
                  filterable
                  :loading="specificLoading"
                  loading-text="加载中..."
                  style="width: 150px"
                  @change="specificChange"
                >
                  <el-option
                    v-for="item in specificList"
                    :key="item.paramId"
                    :label="item.paramName"
                    :value="item.paramId"
                  />
                </el-select>
                <span
                  class="c-[#838A9D] text-[13px] lh-[26px]! mr-[5px] ml-[5px]"
                  >特性</span
                >
                <el-select
                  v-model="specialThreeSearchShaft"
                  placeholder="请选择特性项"
                  clearable
                  filterable
                  :disabled="!specialThreeSearchData"
                  :loading="specificLoading"
                  loading-text="加载中..."
                  style="width: 150px"
                  @change="specificChange"
                >
                  <el-option
                    v-for="item in specificList"
                    :key="item.paramId"
                    :label="item.paramName"
                    :value="item.paramId"
                  />
                </el-select>
              </div>
            </div>
          </div> -->
          <!-- 加载中 -->
          <div
            v-if="specialThreeLoading"
            v-loading="true"
            class="w-full h-[300px]"
          ></div>
          <!-- 数据为空 -->
          <div v-if="!specialThreeLoading && !specialThreeData?.paramId">
            <el-empty description="暂无数据" />
          </div>
          <div v-if="specialThreeData?.paramId">
            <pcmSpecialMonitorLineChart
              key="7"
              id="7"
              :showName="specialThreeChecked"
              :seriesData="specialThreeData"
            />
          </div> </el-card
      ></el-col>
    </el-row>
    <!-- <el-row :gutter="10" /> -->
  </div>
</template>

<script setup lang="ts">
import request from "@/utils/request";
import {
  getMdmproductinfosApi,
  getMdmprojectinfosApi,
  getMdminspectiontoolApi,
  getSpecificListApi,
  getMdmProcessEquipApi,
  getMdmProcessProjectApi,
} from "@/utils/commonData";
import {
  getSingleDataMock,
  dataMock,
  attachDataMock,
  showLineValue,
  getLongDataApi,
  getStateDataApi,
  getSpecialDataApi,
  getSpecialTwoDataApi,
  getSpecialThreeDataApi,
} from "./index";
import { deepClone } from "@/utils/commonHooks";
import { Search } from "@element-plus/icons-vue";
import { useDictionary } from "@/utils/useTable"; // 引入

defineOptions({
  name: "QMSPCMPCMMONITORING",
  inheritAttrs: false,
});

/**
 * 工序列表获取的条件：项目不为空
 * 设备列表获取的条件：项目、工序不为空
 * 产品型号列表：无条件
 * 检具设备列表获取的条件：检具类型不为空
 * 特性值列表获取的条件：工序、设备、产品、检具不为空
 **/

// 初始化搜索参数数据
const searchParamInit = {
  // 项目
  projectCode: "",
  projectId: "",
  // 工序
  processCode: "",
  processId: "",
  // 设备
  equipCode: "",
  equipId: "",
  // 产品型号
  productCode: "",
  productId: "",
  // 检具类型
  gageEquipToolKind: "",
  // 检具名称
  gageEquipCode: "",
  // 机器号
  gageEquipMarkCode: "",
  // 特性
  specificCode: "",
  specificId: "",
};

// 搜索项
const searchParam = reactive(deepClone(searchParamInit));
const searchedParam = reactive(deepClone(searchParamInit));
const searchLoading = ref(false);

// 查询
async function search() {
  // console.log(searchParam);
  if (!searchParam.specificId) {
    ElMessage.error("请选择特性项");
    return;
  }
  searchLoading.value = true;
  Object.assign(searchedParam, { ...searchParam });
  const statusPromise = Promise.allSettled([
    getSingleData(),
    getAverageData(),
    geWorkOrderData(),
    geAttachData(),
    getLongData(),
    getStateData(),
    getSpecialData(),
    getSpecialTwoData(),
    getSpecialThreeData(),
  ]);

  const status = await statusPromise;
  console.log("status", status);
  searchLoading.value = false;
}

// 重置
function reset() {
  Object.assign(searchParam, { ...searchParamInit });
  Object.assign(searchedParam, { ...searchParamInit });
  // 数据重置
  singleData.value = {};
  averageData.value = {};
  workOrderData.value = {};
  attachData.value = [];
  // 配置项重置
  singleChecked.value = true;
  singleCount.value = null;
  averageChecked.value = true;
  averageCount.value = null;
  // 加载中重置
  searchLoading.value = false;
  singleLoading.value = false;
  averageLoading.value = false;
  workOrderLoading.value = false;
  attachLoading.value = false;
}

onMounted(() => {
  // 获取项目列表
  getProjectList();
  // 获取产品型号列表
  getProductList();
});

// 通过工序查询设备列表
const equipList = ref(<any>[]);
async function getEquipList(id: string) {
  equipList.value = (await getMdmProcessEquipApi({ processId: id })) || [];
}
function equipChange(id: string) {
  if (id) {
    const current: any =
      equipList.value?.filter((e: any) => e.id === id)[0] ?? {};
    searchParam.equipCode = current.equipCode || "";
  } else {
    searchParam.equipCode = "";
  }
}

// 获取工序列表
const processList = ref<any>([]);
async function getProcessList(id: string) {
  processList.value = (await getMdmProcessProjectApi({ projectId: id })) || [];
}
function processChange(id: string) {
  searchParam.equipId = "";
  searchParam.equipCode = "";
  if (id) {
    const current: any =
      processList.value?.filter((e: any) => e.id === id)[0] ?? {};
    searchParam.processCode = current.processCode || "";
    getEquipList(id);
  } else {
    searchParam.processCode = "";
    equipList.value = [];
  }
}

// 获取项目列表
const projectList = ref<any>([]);
async function getProjectList() {
  projectList.value = (await getMdmprojectinfosApi({})) || [];
}
function projectChange(id: string) {
  searchParam.equipId = "";
  searchParam.equipCode = "";
  searchParam.processId = "";
  searchParam.processCode = "";
  if (id) {
    const current: any =
      projectList.value?.filter((e: any) => e.id === id)[0] ?? {};
    searchParam.projectCode = current.projectCode || "";
    getProcessList(id);
  } else {
    searchParam.projectCode = "";
    equipList.value = [];
    processList.value = [];
  }
}

// 获取产品型号列表
const productList = ref<any>([]);
async function getProductList() {
  productList.value = (await getMdmproductinfosApi({})) || [];
}
function productChange(id: string) {
  if (id) {
    const current: any =
      productList.value?.filter((e: any) => e.id === id)[0] ?? {};
    searchParam.productCode = current.productCode || "";
  } else {
    searchParam.productCode = "";
  }
}

// 量检具类型变化
function toolKindChange(type: string) {
  searchParam.gageEquipCode = "";
  searchParam.gageEquipMarkCode = "";
  if (type) {
    getGageEquipList(type);
  } else {
    gageEquipList.value = [];
  }
}

// 特性值变化
function specificChange(id: string) {
  if (id) {
    const current: any =
      specificList.value?.filter((e: any) => e.paramId === id)[0] ?? {};
    searchParam.specificCode = current.paramCode || "";
  } else {
    searchParam.specificCode = "";
  }
}

// 获取量检具列表
const gageEquipList = ref<any>([]);
async function getGageEquipList(type: string) {
  gageEquipList.value =
    (await getMdminspectiontoolApi({ toolKind: type })) || [];
}

// 获取特性值列表
const specificList = ref<any>([]);
const specificLoading = ref(false);
async function getSpecificList() {
  specificLoading.value = true;
  specificList.value =
    (await getSpecificListApi({
      equipId: searchParam.equipId,
      gageEquipMarkCode: searchParam.gageEquipCode,
      modelId: searchParam.productId,
      processId: searchParam.processId,
    }).finally(() => {
      specificLoading.value = false;
    })) || [];
}

// 检测必填项，筛选特性值列表
const canSelectSpecific = ref(false);
watch(
  () => searchParam,
  (newVal) => {
    if (
      newVal.equipCode &&
      newVal.gageEquipCode &&
      newVal.productCode &&
      newVal.processCode
    ) {
      canSelectSpecific.value = true;
      getSpecificList();
    } else {
      canSelectSpecific.value = false;
    }
  },
  {
    deep: true,
  }
);

// 获取单值图数据
const singleCount = ref(null); // 采样数量
const singleChecked = ref(true); // 节点是否显示特性值
const singleLoading = ref(false);
const singleData = ref<any>({});
function getSingleData(type = 0) {
  if (!searchedParam.specificId) {
    ElMessage.error("请先选择特性项后，点击查询");
    return;
  }
  if (type && !isPositiveInteger(singleCount.value)) {
    ElMessage.error("请输入正整数");
    return;
  }
  return new Promise(async (resolve, reject) => {
    singleData.value = {};
    singleLoading.value = true;
    const { data }: any = await request({
      url: "/dmpDosPcm/pcmtimingpoint/singleCurve",
      method: "post",
      data: {
        specificId: searchedParam.specificId,
        count: singleCount.value,
      },
    })
      .finally(() => {
        singleLoading.value = false;
      })
      .catch((e) => {
        reject(e);
      });
    singleData.value = data;
    longData.value = data;
    stateData.value = data;
    specialData.value = data;
    specialTwoData.value = data;
    specialThreeData.value = data;
    singleCount.value = singleData.value.count
      ? singleData.value.count
      : singleCount.value;
    resolve("单值图");
  });

  // 模拟
  // return new Promise(async (resolve, reject) => {
  //   singleData.value = {};
  //   singleLoading.value = true;
  //   setTimeout(() => {
  //     singleData.value = getSingleDataMock(singleCount.value);
  //     singleLoading.value = false;
  //     resolve("单值图");
  //   }, 1000);
  // });
}
function isPositiveInteger(value: any) {
  return /^[1-9]\d*$/.test(value);
}

// 获取阶段综合过程能力
const stateCount = ref(null); // 采样数量
const stateChecked = ref(true); // 节点是否显示特性值
const stateLoading = ref(false);
const stateData = ref<any>({});
async function getStateData(type = 0) {
  if (!searchedParam.specificId) {
    ElMessage.error("请先选择特性项后，点击查询");
    return;
  }
  stateData.value = {};
  stateLoading.value = true;
  stateData.value =
    (await getSpecialDataApi({
      specificId: searchedParam.specificId,
      count: 50,
    })) || [];
  stateLoading.value = false;

  // if (!searchedParam.specificId) {
  //   ElMessage.error("请先选择特性项后，点击查询");
  //   return;
  // }
  // if (type && !isPositiveInteger(stateCount.value)) {
  //   ElMessage.error("请输入正整数");
  //   return;
  // }
  // return new Promise(async (resolve, reject) => {
  //   stateData.value = {};
  //   stateLoading.value = true;
  //   const { data }: any = await request({
  //     url: "/dmpDosPcm/pcmtimingpoint/stateCurve",
  //     method: "post",
  //     data: {
  //       specificId: searchedParam.specificId,
  //       count: stateCount.value,
  //     },
  //   })
  //     .finally(() => {
  //       stateLoading.value = false;
  //     })
  //     .catch((e) => {
  //       reject(e);
  //     });
  //   stateData.value = data;
  //   stateCount.value = stateData.value.count
  //     ? stateData.value.count
  //     : stateCount.value;
  //   resolve("阶段图");
  // });

  // 模拟
  // return new Promise(async (resolve, reject) => {
  //   singleData.value = {};
  //   singleLoading.value = true;
  //   setTimeout(() => {
  //     singleData.value = getSingleDataMock(singleCount.value);
  //     singleLoading.value = false;
  //     resolve("单值图");
  //   }, 1000);
  // });
}

// 获取均值图数据
const averageCount = ref(null); // 采样数量
const averageGroupCount = ref(null); // 均值分组测量值个数
const averageChecked = ref(true); // 节点是否显示特性值
const averageLoading = ref(false);
const averageData = ref<any>({});
function getAverageData(type = 0) {
  if (!searchedParam.specificId) {
    ElMessage.error("请先选择特性项后，点击查询");
    return;
  }
  if (type && !isPositiveInteger(averageCount.value)) {
    ElMessage.error("请输入正整数");
    return;
  }
  if (type && !isPositiveInteger(averageGroupCount.value)) {
    ElMessage.error("请输入正整数");
    return;
  }
  return new Promise(async (resolve, reject) => {
    averageData.value = {};
    averageLoading.value = true;
    const { data }: any = await request({
      url: "/dmpDosPcm/pcmtimingpoint/averageCurve",
      method: "post",
      data: {
        specificId: searchedParam.specificId,
        count: averageCount.value,
        groupCount: averageGroupCount.value,
      },
    })
      .finally(() => {
        averageLoading.value = false;
      })
      .catch((e) => {
        reject(e);
      });
    averageData.value = data;
    // 采集点数
    averageCount.value = averageData.value.count
      ? averageData.value.count
      : averageCount.value;
    // 均值采集点数
    averageGroupCount.value = averageData.value.groupCount
      ? averageData.value.groupCount
      : averageGroupCount.value;
    resolve("均值图");
  });

  // 模拟
  // return new Promise(async (resolve, reject) => {
  //   averageData.value = {};
  //   averageLoading.value = true;
  //   setTimeout(() => {
  //     averageData.value = getSingleDataMock(averageCount.value);
  //     averageLoading.value = false;
  //     resolve("均值图");
  //   }, 1500);
  // });
}

// 获取工单数据
const workOrderData = ref<any>({});
const workOrderLoading = ref(false);
async function geWorkOrderData() {
  // return new Promise(async (resolve, reject) => {
  //   workOrderData.value = {};
  //   workOrderLoading.value = true;
  //   const { data }: any = await request({
  //     url: "/mdm/mdmproductinfo/getList",
  //     method: "post",
  //     data: {
  //       id: searchedParam.specificId,
  //     },
  //   })
  //     .finally(() => {
  //       workOrderLoading.value = false;
  //     })
  //     .catch((e) => {
  //       reject(e);
  //     });
  //   workOrderData.value = data;
  //   resolve("工单详情");
  // });

  // 模拟
  return new Promise(async (resolve, reject) => {
    workOrderData.value = {};
    workOrderLoading.value = true;
    setTimeout(() => {
      workOrderData.value = dataMock;
      workOrderLoading.value = false;
      resolve("工单详情");
    }, 500);
  });
}

// 获取特殊综合过程能力1
const specialCount = ref(null); // 采样数量
const specialChecked = ref(true); // 节点是否显示特性值
const specialLoading = ref(false);
const specialSearchData = ref("");
const specialSearchShaft = ref("");
const specialData = ref<any>({});
async function getSpecialData(type = 0) {
  if (!searchedParam.specificId) {
    ElMessage.error("请先选择特性项后，点击查询");
    return;
  }
  specialData.value = {};
  specialLoading.value = true;
  specialData.value =
    (await getSpecialDataApi({
      specificId: searchedParam.specificId,
      count: 50,
    })) || [];
  specialLoading.value = false;

  // return new Promise(async (resolve, reject) => {
  //   specialData.value = {};
  //   specialLoading.value = true;
  //   const { data }: any = await request({
  //     url: "/dmpDosPcm/pcmtimingpoint/specialCurve",
  //     method: "post",
  //     data: {
  //       specificId: searchedParam.specificId,
  //       count: specialCount.value,
  //     },
  //   })
  //     .finally(() => {
  //       specialLoading.value = false;
  //     })
  //     .catch((e) => {
  //       reject(e);
  //     });
  //   specialData.value = data;
  //   specialCount.value = specialData.value.count
  //     ? specialData.value.count
  //     : specialCount.value;
  //   resolve("阶段图");
  // });

  // 模拟
  // return new Promise(async (resolve, reject) => {
  //   singleData.value = {};
  //   singleLoading.value = true;
  //   setTimeout(() => {
  //     singleData.value = getSingleDataMock(singleCount.value);
  //     singleLoading.value = false;
  //     resolve("单值图");
  //   }, 1000);
  // });
}

const specialSearchDataChange = async (e) => {
  if (e) {
    await getSpecialData();
  }
};

// 获取附件数据
const attachData = ref<any>([]);
const attachLoading = ref(false);
function geAttachData() {
  // return new Promise(async (resolve, reject) => {
  //   attachData.value = [];
  //   attachLoading.value = true;
  //   const { data }: any = await request({
  //     url: "/mdm/mdmproductinfo/getList",
  //     method: "post",
  //     data: {
  //       id: searchedParam.specificId,
  //     },
  //   })
  //     .finally(() => {
  //       attachLoading.value = false;
  //     })
  //     .catch((e) => {
  //       reject(e);
  //     });
  //   attachData.value = data || [];
  //   resolve("附件下载");
  // });

  // 模拟
  return new Promise(async (resolve, reject) => {
    attachData.value = [];
    attachLoading.value = true;
    setTimeout(() => {
      attachData.value = attachDataMock;
      attachLoading.value = false;
      resolve("附件下载");
    }, 1000);
  });
}

// 获取长期综合过程能力
const longCount = ref(null); // 采样数量
const longChecked = ref(true); // 节点是否显示特性值
const longLoading = ref(false);
const longData = ref<any>({});
async function getLongData(type = 0) {
  if (!searchedParam.specificId) {
    ElMessage.error("请先选择特性项后，点击查询");
    return;
  }
  longData.value = {};
  longLoading.value = true;
  longData.value =
    (await getLongDataApi({
      specificId: searchedParam.specificId,
      count: 50,
    })) || [];
  longLoading.value = false;
  // if (type && !isPositiveInteger(longCount.value)) {
  //   ElMessage.error("请输入正整数");
  //   return;
  // }
  // return new Promise(async (resolve, reject) => {
  //   longData.value = {};
  //   longLoading.value = true;
  //   const { data }: any = await request({
  //     url: "/dmpDosPcm/pcmtimingpoint/longCurve",
  //     method: "post",
  //     data: {
  //       specificId: searchedParam.specificId,
  //       count: longCount.value,
  //     },
  //   })
  //     .finally(() => {
  //       longLoading.value = false;
  //     })
  //     .catch((e) => {
  //       reject(e);
  //     });
  //   longData.value = data;
  //   longCount.value = longData.value.count
  //     ? longData.value.count
  //     : longCount.value;
  //   resolve("阶段图");
  // });

  // 模拟
  // return new Promise(async (resolve, reject) => {
  //   singleData.value = {};
  //   singleLoading.value = true;
  //   setTimeout(() => {
  //     singleData.value = getSingleDataMock(singleCount.value);
  //     singleLoading.value = false;
  //     resolve("单值图");
  //   }, 1000);
  // });
}
// 获取特殊送检综合过程能力2
const specialTwoCount = ref(null); // 采样数量
const specialTwoChecked = ref(true); // 节点是否显示特性值
const specialTwoLoading = ref(false);
const specialTwoSearchData = ref("");
const specialTwoSearchShaft = ref("");
const specialTwoData = ref<any>({});
async function getSpecialTwoData(type = 0) {
  if (!searchedParam.specificId) {
    ElMessage.error("请先选择特性项后，点击查询");
    return;
  }
  specialTwoData.value = {};
  specialTwoLoading.value = true;
  specialTwoData.value =
    (await getSpecialTwoDataApi({
      specificId: searchedParam.specificId,
      count: 50,
    })) || [];
  specialTwoLoading.value = false;
  // return new Promise(async (resolve, reject) => {
  //   specialTwoData.value = {};
  //   specialTwoLoading.value = true;
  //   const { data }: any = await request({
  //     url: "/dmpDosPcm/pcmtimingpoint/specialTwoCurve",
  //     method: "post",
  //     data: {
  //       specificId: searchedParam.specificId,
  //       count: specialTwoCount.value,
  //     },
  //   })
  //     .finally(() => {
  //       specialTwoLoading.value = false;
  //     })
  //     .catch((e) => {
  //       reject(e);
  //     });
  //   specialTwoData.value = data;
  //   specialTwoCount.value = specialTwoData.value.count
  //     ? specialTwoData.value.count
  //     : specialTwoCount.value;
  //   resolve("阶段图");
  // });

  // 模拟
  // return new Promise(async (resolve, reject) => {
  //   singleData.value = {};
  //   singleLoading.value = true;
  //   setTimeout(() => {
  //     singleData.value = getSingleDataMock(singleCount.value);
  //     singleLoading.value = false;
  //     resolve("单值图");
  //   }, 1000);
  // });
}

const specialTwoSearchDataChange = async (e) => {
  if (e) {
    await getSpecialTwoData();
  }
};

// 获取特殊送检综合过程能力3
const specialThreeCount = ref(null); // 采样数量
const specialThreeChecked = ref(true); // 节点是否显示特性值
const specialThreeLoading = ref(false);
const specialThreeSearchData = ref("");
const specialThreeSearchShaft = ref("");
const specialThreeData = ref<any>({});
async function getSpecialThreeData(type = 0) {
  if (!searchedParam.specificId) {
    ElMessage.error("请先选择特性项后，点击查询");
    return;
  }
  specialThreeData.value = {};
  specialThreeLoading.value = true;
  specialThreeData.value =
    (await getSpecialThreeDataApi({
      specificId: searchedParam.specificId,
      count: 50,
    })) || [];
  specialThreeLoading.value = false;

  // return new Promise(async (resolve, reject) => {
  //   specialThreeData.value = {};
  //   specialThreeLoading.value = true;
  //   const { data }: any = await request({
  //     url: "/dmpDosPcm/pcmtimingpoint/specialThreeCurve",
  //     method: "post",
  //     data: {
  //       specificId: searchedParam.specificId,
  //       count: specialThreeCount.value,
  //     },
  //   })
  //     .finally(() => {
  //       specialThreeLoading.value = false;
  //     })
  //     .catch((e) => {
  //       reject(e);
  //     });
  //   specialThreeData.value = data;
  //   specialThreeCount.value = specialThreeData.value.count
  //     ? specialThreeData.value.count
  //     : specialThreeCount.value;
  //   resolve("阶段图");
  // });

  // 模拟
  // return new Promise(async (resolve, reject) => {
  //   singleData.value = {};
  //   singleLoading.value = true;
  //   setTimeout(() => {
  //     singleData.value = getSingleDataMock(singleCount.value);
  //     singleLoading.value = false;
  //     resolve("单值图");
  //   }, 1000);
  // });
}
const specialThreeSearchDataChange = async (e) => {
  if (e) {
    await getSpecialThreeData();
  }
};
</script>
<style lang="scss" scoped>
:deep(.search-container) {
  .el-input__wrapper {
    width: 170px;
  }
}
:deep(.table-container) {
  height: 380px;
  overflow: visible;
  .el-card__body {
    padding: 15px;
    .el-empty {
      height: 300px;
      .el-empty__image {
        width: 60px;
      }
    }
    .el-loading-spinner {
      svg {
        width: 24px;
        height: 24px;
      }
    }
    .title {
      .el-input__inner {
        height: 24px;
      }
      strong {
        color: #091e40;
        font-size: 16px;
      }
      .el-checkbox__input {
        margin-top: -3px;
      }
      .el-checkbox__label {
        font-size: 13px;
        color: #838a9d;
        padding-left: 4px;
        line-height: 26px !important;
      }
      .single_count_input {
        width: 100px;
        margin-left: 8px;
        height: 26px;
        .el-input-group__append {
          padding: 0px;
          button {
            margin: 0;
            padding: 0 7px;
          }
        }
        .el-icon {
          font-size: 20px;
          width: 20px;
          height: 20px;
        }
      }
    }
    .search_btn {
      height: 26px;
      width: 36px;
      margin-left: 4px;
      background-color: var(--el-fill-color-light);
      color: var(--el-color-info);
      .el-icon {
        width: 18px !important;
        height: 18px !important;
      }
    }
    .charts_des {
      margin-top: 5px;
      color: #838a9d;
      font-size: 13px;
      font-family: "DINLight";
      .squary {
        width: 14px;
        height: 14px;
        display: inline-block;
        border-radius: 3px;
        margin-right: 3px;
      }
    }
  }
}
.search_btn1 {
  height: 30px;
  width: 40px;
  margin-left: 4px;
  background-color: var(--el-fill-color-light);
  color: var(--el-color-info);
  .el-icon {
    width: 18px !important;
    height: 18px !important;
  }
}
</style>
